import React, { useState, useEffect } from 'react';
import cn from 'classnames';
import BreadCrumb from '@/components/BreadCrumb';
import { remoteHelp } from '~/API';
import s from './style.module.css';
import i from '../../index.module.css';
import { getErrorMessage } from '@/common/constant';
import { Switch, Icon, Message } from '@knownsec/react-component';
export default function RemoteHelp() {
  const [switchVal, setSwitchVal] = useState(0);
  const [show, setShow] = useState(true);
  const [ID, setID] = useState('');
  const changeSwitch = (bool) => {
    setSwitchVal(Number(bool));
    remoteHelp('POST', { enabled: Number(bool) })
      .then((res) => {
        Message.show({
          type: res.status,
          message: res.message,
          onclose() {
            getSwitch();
          },
        });
      })
      .catch((err) => Message.show({ type: 'error', message: getErrorMessage(err) }));
  };
  const getSwitch = () => {
    remoteHelp('GET').then((res) => {
      res.data.enabled ? setSwitchVal(1) : setSwitchVal(0);
      res.data.id&&setID(res.data.id)
    });
  };
  useEffect(() => {
    getSwitch();
  }, []);
  return (
    <div className={i.mainContent}>
      <BreadCrumb
        arr={[
          { link: '', name: '问题排查' },
          { link: '', name: '远程协助', active: true },
        ]}
      />
      <div className={cn(s.content, i.p24, i.oa, i.h100p, i.mins)}>
        <div className={s.bgc}>
          <div className={cn(i.pt24, i.pl20, i.pr20, i.pb24)}>
            <p>远程协助</p>
            {show && (
              <div className={cn(s.bor, i.mt20, i.df, i.aic, i.jcsb)}>
                <div>
                  <Icon type="error" className={cn(i.warningColor, i.fs16, i.vam)} />
                  <span className={cn(i.ml10, i.vam)}>
                    使用远程协助需确保您的设备处于可联网状态，请您先与厂商确认后，再开启远程协助。
                  </span>
                </div>
                <svg
                  className={i.cp}
                  onClick={() => setShow(false)}
                  width="10px"
                  height="10px"
                  viewBox="0 0 10 10"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  xlink="http://www.w3.org/1999/xlink"
                >
                  <g id="控件" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
                    <g id="警告提示/样式二/告警" transform="translate(-264.000000, -19.000000)">
                      <g id="告警">
                        <g id="关闭" transform="translate(261.000000, 16.000000)">
                          <g id="编组">
                            <polygon
                              id="路径"
                              fill="#CBD1DA"
                              points="12.2307692 3 13 3.76923077 8.769 8 13 12.2307692 12.2307692 13 7.9995 8.769 3.76923077 13 3 12.2307692 7.2305 8 3 3.76923077 3.76923077 3 8 7.2305"
                            ></polygon>
                            <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
                          </g>
                        </g>
                      </g>
                    </g>
                  </g>
                </svg>
              </div>
            )}
            <div className={cn(s.item, i.mt24)}>
              <div className={cn(i.df, i.aifs)}>
                {switchVal === 1 ? (
                  <svg
                    width="64px"
                    height="64px"
                    viewBox="0 0 64 64"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    xlink="http://www.w3.org/1999/xlink"
                  >
                    <g id="页面设计" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
                      <g id="远程协助-打开" transform="translate(-183.000000, -287.000000)">
                        <g id="Group-2-Copy" transform="translate(183.000000, 287.000000)">
                          <g id="分组-6">
                            <g id="icon/短信通知">
                              <circle id="Oval" stroke="#E6EAEF" cx="32" cy="32" r="31.5"></circle>
                              <g id="Group-2" transform="translate(18.000000, 16.000000)">
                                <path
                                  d="M6.4,9.8 L12.8484,14.636384 L26,2.8 L15.7884,16.841328 L23.2,22.4 L28.8,0 L6.4,9.8 Z M12.000112,22.4 L16.2,19.6 L12.000112,16.799888 L12.000112,22.4 Z"
                                  id="Fill-1"
                                  fill="#0B6FD6"
                                ></path>
                                <line
                                  x1="14.4"
                                  y1="28.5254834"
                                  x2="18.9254834"
                                  y2="24"
                                  id="Line"
                                  stroke="#0B6FD6"
                                  opacity="0.5"
                                  strokeLinecap="round"
                                  fillRule="nonzero"
                                ></line>
                                <line
                                  x1="3.2"
                                  y1="31.0627417"
                                  x2="5.4627417"
                                  y2="28.8"
                                  id="Line-Copy"
                                  stroke="#0B6FD6"
                                  strokeLinecap="round"
                                  fillRule="nonzero"
                                ></line>
                                <line
                                  x1="0"
                                  y1="20.0568542"
                                  x2="5.65685425"
                                  y2="14.4"
                                  id="Line-Copy-2"
                                  stroke="#0B6FD6"
                                  strokeLinecap="round"
                                  fillRule="nonzero"
                                ></line>
                                <line
                                  x1="1.6"
                                  y1="24.1941125"
                                  x2="4.99411255"
                                  y2="20.8"
                                  id="Line-Copy-3"
                                  stroke="#0B6FD6"
                                  opacity="0.200000003"
                                  strokeLinecap="round"
                                  fillRule="nonzero"
                                ></line>
                              </g>
                            </g>
                          </g>
                        </g>
                      </g>
                    </g>
                  </svg>
                ) : (
                  <svg
                    width="64px"
                    height="64px"
                    viewBox="0 0 64 64"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    xlink="http://www.w3.org/1999/xlink"
                  >
                    <g id="页面设计" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
                      <g id="远程协助" transform="translate(-184.000000, -287.000000)">
                        <g id="Group-2" transform="translate(184.000000, 287.000000)">
                          <g id="分组-6">
                            <g id="icon/短信通知">
                              <circle id="Oval" stroke="#E6EAEF" cx="32" cy="32" r="31.5"></circle>
                              <g
                                id="Group-2"
                                transform="translate(21.000000, 21.000000)"
                                fill="#686C78"
                              >
                                <path
                                  d="M0,9.8 L6.4484,14.636384 L19.6,2.8 L9.3884,16.841328 L16.8,22.4 L22.4,0 L0,9.8 Z M5.600112,22.4 L9.8,19.6 L5.600112,16.799888 L5.600112,22.4 Z"
                                  id="Fill-1"
                                ></path>
                              </g>
                            </g>
                          </g>
                        </g>
                      </g>
                    </g>
                  </svg>
                )}
                <div className={i.ml16}>
                  <p className={s.inf}>{switchVal === 1 ? '断开远程服务' : '开启远程协助'}</p>
                  <p className={cn(i.pt10, i.primaryColor)}>
                    {switchVal === 1
                      ? '您有一项远程任务正在执行。'
                      : '点击开关可开启或关闭远程协助。'}
                  </p>
                </div>
                <div className={cn(s.swBox)}>
                  <Switch
                    pro
                    className={s.switch}
                    checked={switchVal}
                    onChange={changeSwitch}
                  
                  />
                  {Boolean(switchVal)&&<p><span>远程协助ID：</span>{ID}</p>}
                </div>
                
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
